<template>
  <div class="designer-resourse">
    <div class="designer-resourse-bind">
      <div class="title">仓库绑定</div>
      <div class="mid">
        <AiForm :data="form1.data"></AiForm>
        <div class="btn">
          <a-button type="primary" style="margin-left: 120px">保存</a-button>
        </div>
      </div>
    </div>
    <div class="designer-resourse-file">
      <div class="title">页面导入</div>
      <div class="mid">
        <AiForm :data="form2.data"></AiForm>
        <div class="btn">
          <a-button type="primary" style="margin-left: 120px">保存</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { InboxOutlined } from "@ant-design/icons-vue";
const fileList = ref([]);
const UploadUrl = "/api/upload";
const form2 = ref({
  data: [
    {
      type: "UploadDragger",
      field: "piturePath",
      label: "上传文件：",
      value: [],
      labelWidth: "110px",
      placeholder: "上传文件",
      action: UploadUrl,
      method: "post",
      listType: "picture-card",
      arr2str: true,
      maxCount: 1,
      beforeUpload: (file) => {
        const isPNG = file.type.match(/(jp(e)?g|png|gif)/g);
        const limit = file.size / 1024 / 1024 <= 10;
        if (!isPNG) {
          message.error(`请上传图片格式！`);
          return Upload.LIST_IGNORE;
        }
        if (!limit) {
          message.error(`图片大小不能大于10M！`);
          return Upload.LIST_IGNORE;
        }
        return isPNG && limit;
      },
      render: () => {
        return `<p class="ant-upload-drag-icon">
            <i class="icon iconfont icon-shangchuan" style="font-size: 50px; color: #6587f8;"></i>
          </p>
          <p class="ant-upload-text">拖拽文件至此或点击上传支持JSON格式，文件大小控制在 10M 以内</p>`;
      },
      rules: [
        {
          required: true,
          message: "请输入景点图片",
          trigger: "blur",
        },
      ],
    },
  ],
});
const form1 = ref({
  data: [
    {
      field: "name",
      value: "",
      allowClear: true,
      label: "绑定代码仓库:",
      type: "Input",
      name: "name",
      placeholder: "请绑定代码仓库",
      labelWidth: "110px",
      rules: [
        {
          required: true,
          message: "请绑定代码仓库",
          trigger: "blur",
        },
      ],
    },
    {
      field: "name",
      value: "",
      allowClear: true,
      label: "配置初始版本号:",
      labelWidth: "110px",
      type: "Input",
      name: "url",
      placeholder: "配置初始版本号",
      rules: [
        {
          required: true,
          message: "请输入配置初始版本号",
          trigger: "blur",
        },
      ],
    },
  ],
});

const handleChange = (info) => {
  const status = info.file.status;
  if (status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
</script>
<style scoped lang="scss">
.title {
  margin-bottom: 20px;
  font-weight: bold;
}
.designer-resourse-bind {
  background-color: #fff;
  padding: 25px 25px;
  border-radius: 10px;
}

.designer-resourse-file {
  background-color: #fff;
  padding: 25px 25px;
  margin-top: 20px;
  border-radius: 10px;
}

.mid {
  width: 800px;
  margin: 0 auto;
}
</style>
